<template>
  <div class="back-img">
    <div class="root">
      <form onsubmit="" method="post">
        <fieldset>
          <div class="input-box">
            <p>注&nbsp;&nbsp;册</p>

            <label for="username">
              <label style="color: #ee4848">*&ensp;</label> 用&ensp;户&ensp;名：</label>
            <input type="text" name="username" placeholder="数字或字母，3-15字符" id="username" title="输入数字或字母，3-15字符">
            <span class="error" id="usernameErr"></span>
            <br>

            <label for="name">
              <label style="color: #ee4848">*&ensp;</label> 昵&ensp;&ensp;&ensp;&ensp;称：</label>
            <input type="text" name="name" placeholder="数字、字母或汉字，3-20字符" id="name" title="输入数字、字母或汉字，3-20字符">
            <span class="error" id="nameErr"></span>
            <br>

            <label for="email"><label style="color: #ee4848">*&ensp;</label> 邮箱地址：</label>
            <input type="text" name="email" placeholder="有效的邮箱地址" id="email" title="输入有效的邮箱地址">
            <span class="error" id="emailErr"></span>
            <br>


            <!-- 非必需-->
            <label>
              <label style="opacity: 0">*&ensp;</label> 性&ensp;&ensp;&ensp;&ensp;别：</label>
            <sub><input type="radio" name="gender" class="gender" value="male" title="选择男性"/></sub>男&ensp;&ensp;
            <sub><input type="radio" name="gender" class="gender" value="female" title="选择女性"/></sub>女&ensp;&ensp;
            <sub><input type="radio" name="gender" class="gender" value="hidden" title="不保留当前选项"/></sub>不选
            <br>

            <!--非必需-->
            <label for="phone">
              <label style="opacity: 0">*&ensp;</label> 电话号码：</label>
            <input type="text" name="phone" placeholder="有效的电话号码" id="phone" title="输入有效的电话号码">
            <span class="error" id="phoneErr"></span>
            <br>

            <label for="password">
              <label style="color: #ee4848">*&ensp;</label> 密&ensp;&ensp;&ensp;&ensp;码：</label>
            <input type="password" name="password" placeholder="数字或字母，6-20字符" id="password" title="输入数字或字母，6-20字符">
            <span class="error" id="passwordErr"></span>
            <br>

            <label for="rePassword">
              <label style="color: #ee4848">*&ensp;</label> 确认密码：</label>
            <input type="password" name="rePassword" placeholder="再次输入密码" id="rePassword" title="再次输入密码">
            <span class="error" id="rePasswordErr"></span>
            <br> <br>


            <input type="submit" value="注 册" id="submit" title="注册">

<!--            <a id="returnLogin" href="login.html" title="返回登陆">👈返回登录</a>-->
            <router-link to="/login" title="返回登陆">👈返回登录</router-link>
            <a id="help" onclick="help()" title="帮助">帮助🙋‍</a>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "RegisterPage"
}
</script>

<style scoped>
body {
  background: rgb(270, 270, 270);
  user-select: none;
}

p {
  color: #008559;
  text-align: center;
  font-size: 46px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 24px;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
}

fieldset {
  margin-top: 1%;
  width: 580px;
  height: 740px;
  background-color: rgb(250, 250, 250);
  border: none;
  border-radius: 20px;
  box-shadow: 0 0 80px -1px #00521b;
}

label {
  width: 80px;
  height: 40px;
  font-size: 16px;
  text-align: right;
}

input {
  padding-left: 10px;
  margin-top: 5px;
  width: 410px;
  height: 36px;
  font-size: 14px;
  border-radius: 5px;
  border: 2px solid rgb(200, 200, 200);
  outline-color: #98dac5;
  letter-spacing: 1px;
}
input[type="password"]{
  letter-spacing: 2px;
}

a {
  color: #008559;
  text-decoration: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
}

.back-img {
  background-image: url(../../static/img/background-main-green.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 99.45vw;
  height: 52vw;
  position: relative;
}

.error {
  color: #ee4848;
  font-size: 14px;
  margin-left: 105px;
}


.input-box {
  margin: 40px 30px;

}

.gender {
  width: 20px;
  height: 15px;
  margin-top: 10px;
  margin-bottom: 28px;
}

#submit {
  margin-top: -10px;
  width: 532px;
  height: 55px;
  font-size: 16px;
  color: white;
  background-color: #56ad8f;
  border: none;
}

#returnLogin {
  float: left;
  margin-top: 10px;
}

#help {
  float: right;
  margin-top: 10px;
  margin-right: 2px;
}

#submit:hover {
  background-color: #119a6a;
}

#returnLogin:hover, #help:hover {
  color: #00521b;
}
</style>